<template>
<div class="main">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <i class="fa fa-reorder"></i>
        </button>
        <router-link class="navbar-brand" to="/home">能耗管理系统配置后台</router-link>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li @click="aaa()" v-for="menu in menus" class="dropdown" :class="{'active': menu.href && $route.path.indexOf(menu.href) > -1}"   :to="menus.length==1?'menu.href':'#'">
            <router-link :to="menu.sub?'':menu.href" >
            <a class="dropdown-toggle" data-toggle="dropdown">
              {{menu.title}}
              <b class="caret" v-if="menu.sub"></b>
            </a>
            <ul class="dropdown-menu" v-if="menu.sub">
              <li v-for="subMenu in menu.sub" :class="{'active': subMenu.href && $route.path.indexOf(subMenu.href) > -1}" ><router-link :to="subMenu.href">{{subMenu.title}}</router-link></li>
            </ul>
          </router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <article>
    <router-view></router-view>
  </article>
</div>
</template>

<script>
  export default {
    data () {
      return {
        menus: [{
          title: '工作站',
          href: '/main/station-workStation',
        },{
          title: '采集器',
          href: '/main/device-baseStdSampler',
        },{
          title: '设备类型',
          href: '/main/device-baseStdDevType',
        },{
          title: '能耗相关',
          href: '/main/device',
          sub: [{
            title: '楼宇表',
            href: '/main/device-baseEnBuilding'
          },{
            title: '楼层表',
            href: '/main/building-baseEnFloor'
          },{
            title: '部门表',
            href: '/main/building-baseEnDepartment'
          },{
            title: '用电装置类别表',
            href: '/main/device-baseEnElecClass'
          },{
            title: '配电房表',
            href: '/main/station-baseEnSwitchRoom'
          },{
            title: '配电柜表',
            href: '/main/station-baseEnDistBox'
          },{
            title: '电表',
            href: '/main/device-baseEnMeter'
          },{
            title: '变压器表',
            href: '/main/device-baseEnTransformer'
          }]
        },{
          title: '环境相关',
          href: '/main/device',
          sub: [{
            title: '局房表',
            href: '/main/station-baseHouse'
          },{
            title: '设备表',
            href: '/main/device-baseCfgDevice'
          }]
        },{
          title: '电费费率',
          href: '/main/station-workStation',
          
        }]
      }
    },
    methods: {
        aaa(){
          console.log(this.$route.path)
          console.log(this.menus)
        }
    },
    beforeCreate() {
      if(!sessionStorage.getItem("the_station_id")) {
        this.$router.replace({ path: '/home'});
      }
      }
    }

</script>

<style scoped>
  .red{
    background-color: red!important;
  }
  .navbar-default .navbar-nav>.active > a{
        background-color:rgb(248,248,248)!important;
  }
  .dropdown-menu > .active > a {
    background-color: #03997f;
  }

  .dropdown-toggle {
    cursor: pointer;
  }
  .nav>li.dropdown>a {
    padding: 15px 30px;
  }
  .main {
    min-height: 100vh;
    background-color: #f3f3f3;
  }
  @media (max-width: 767px) {
    .dropdown-menu>li>a {
      text-align: center;
      padding-left: 10px!important;
    }
  }
</style>
